<!DOCTYPE html>
<html>
<head>
<script src="/static/js/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body {
	font-family: arial;
}

table {
	border: 1px solid #ccc;
	width: 80%;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0 auto;
}

table tr {
	border: 1px solid #ddd;
	padding: 5px;
}

table th, table td {
	padding: 10px;
	text-align: center;
}

table th {
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 1px;
	background-color: #50C2FF;
	color: #FFFFFF;
}

@media screen and (max-width: 600px) {
	table {
		border: 0;
	}
	table thead {
		display: none;
	}
	table tr {
		margin-bottom: 10px;
		display: block;
		border-bottom: 2px solid #ddd;
	}
	table td {
		display: block;
		text-align: right;
		font-size: 13px;
		border-bottom: 1px dotted #ccc;
	}
	table td:last-child {
		border-bottom: 0;
	}
	table td:before {
		content: attr(data-label);
		float: left;
		text-transform: uppercase;
		font-weight: bold;
	}
}

.note {
	max-width: 80%;
	margin: 0 auto;
}
</style>
</head>

<body>

	<form action="../alipay/createOrder" method="post">
		<input type="hidden" id="productId" name="productId" value="${p.id }" />
		<table>
			<tr>
				<td>产品编号: ${p.id }</td>
			</tr>
			<td>产品名称: ${p.name }</td>
			<tr>
			</tr>
			<td>产品价格: ${p.price }</td>
			<tr>
			</tr>
			<td>购买个数： <input id="buyCounts" name="buyCounts" />
			</td>
			</tr>
			</tr>
			<td><input type="submit" value="表单提交，生成订单" />
				&nbsp;&nbsp;&nbsp;&nbsp; <input type="button" value="异步提交，生成订单"
				onclick="createOrder()" /></td>
			</tr>
		</table>
	</form>
	<input type="hidden" id="hdnContextPath" name="hdnContextPath"
		value=".." />
</body>
</html>

<script type="text/javascript">
	var hdnContextPath = $("#hdnContextPath").val();

	function createOrder() {
		$.ajax({
			url : hdnContextPath + "/alipay/createOrder",
			type : "POST",
			data : {
				"productId" : $("#productId").val(),
				"buyCounts" : $("#buyCounts").val()
			},
			dataType : "json",
			success : function(data) {
				if (data.status == 200 && data.msg == "OK") {
					debugger;
					// 提交订单成功后, 进入购买页面
					window.location.href = hdnContextPath
							+ "/alipay/goPay?orderId=" + data.data;
				} else {
					alert(data.msg);
					console.log(JSON.stringify(data));
				}
			}
		});
	}
</script>

